<template>
    <el-form class="myForm" ref="myForm" :model="form" :rules="rules" v-bind="opt">
        <template v-if="opt.layout === 'block'">
            <el-form-item  v-for="item in fieldList" :label="item.label" :prop="item.paramKey">
                <component :is="controlMaps[item.type]" :payload="item.payload" :form="form" :data="item" :total="item.total" ></component>
            </el-form-item>
        </template>
        <template v-else-if="opt.layout === 'inline'">
            <el-row>
                <el-col :span="colWidth" v-for="item in fieldList">
                    <el-form-item :label="item.label" :prop="item.paramKey">
                        <component :is="controlMaps[item.type]" :payload="item.payload" :form="form" :data="item" :total="item.total" @search="item.search" ></component>
                    </el-form-item>
                </el-col>
            </el-row>
        </template>
    </el-form>
</template>

<script setup>
    import { ref, reactive, watch, onMounted } from 'vue';
    import FlexInput from '@/components/FlexInput.vue';
    import FlexSelect from '@/components/FlexSelect.vue';
    import FlexDatePicker from '@/components/FlexDatePicker.vue';
    const controlMaps = {
        'input':FlexInput,
        'select':FlexSelect,
        'date':FlexDatePicker
    }
    const emit = defineEmits(['submit']);
    const props = defineProps({
        form:{ type:Object },
        rules:{ type:Object },
        opt:{ type:Object },
        fieldList:{ type:Array }
    });
    const myForm = ref();
    const colWidth = 24 / ( props.opt.colNum || 1);
    function handleSubmit(){
        myForm.value.validate(valid=>{
            if ( valid ){
                emit('submit');
            }
        })
    }
    defineExpose({
        handleSubmit
    })
</script>
<style lang="scss">
    .myForm.el-form {
        .el-col {
            .el-form-item {
                margin-right:var(--lPadding);
            }
        }
    }
   
</style>